<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
	<title>Welcome</title>
	<!--fonts-->
		<link href='css/Raleway.css' rel='stylesheet' type='text/css'>
		<link href='css/Lato.css' rel='stylesheet' type='text/css'>
	<!--//fonts-->
		<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
		<link href="css/jquery-ui.css" rel="stylesheet">
		<link rel="stylesheet" href="css/jquery.notify.css" type="text/css">
	<!-- for-mobile-apps -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Kong Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
		Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!-- //for-mobile-apps -->
	<!-- js -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.notify.js"></script>
	<!-- js -->
	<!-- start-smooth-scrolling -->
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$.post("/server/welcome",{},function(data,status){
					if(null == data)
					{
						alert("return null");
						return;
					}
					
					if("0" == data.code)
					{
						$("#user_name").html("I'M " + data.username);
					}
					else
					{
						$(window.location).attr("href", "/client/login");
					}
				});
				$(".scroll").click(function(event){
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
	<!-- start-smooth-scrolling -->

</head>
<body>
<!-- banner -->
<div class="banner" id="home">
	<div class="container"> 
		<div class="top-header row">
			<script src="js/classie.js"></script>
			<!--top-nav---->
			<div class="logo">
				<a href="index.html"><img src="images/logo.png" alt=""/></a>
			</div>
			<div class="top-nav">
				<div class="nav-icon">
					    <a href="#" class="right_bt" id="activator"><span> </span> </a>
				</div>
				<div class="box" id="box">
					<div class="box_content">        					                         
						<div class="box_content_center">
							<div class="form_content">
								<div class="menu_box_list">
									<ul>
										<li><a class="scroll" href="#home"><span>home</span></a></li>
										<li><a class="scroll" href="#about"><span>about</span></a></li>
										<li><a class="scroll" href="#services"><span>services</span></a></li>
										<li><a class="scroll" href="#portfolio"><span>portfolio</span></a></li>
										<li><a class="scroll" href="#testimonial"><span>Testimonial</span></a></li>
										<li><a class="scroll" href="#blog"><span>blog</span></a></li>
										<li><a class="scroll" href="#contact"><span>Contact</span></a></li>
										<div class="clearfix"> </div>
									</ul>
								</div>
								<a class="boxclose" id="boxclose"> <span> </span></a>
							</div>                                  
						</div> 	
					</div> 
				</div>       	  
			</div>
			<!---start-click-drop-down-menu----->
			        <!----start-dropdown--->
					<script src="js/jquery-ui.js"></script>
			        <script type="text/javascript">
						var $ = jQuery.noConflict();
							$(function() {
								$('#activator').click(function(){
									$('#box').animate({'top':'0px'},900);
								});
								$('#boxclose').click(function(){
								$('#box').animate({'top':'-1000px'},900);
								});
							});
							$(document).ready(function(){
							//Hide (Collapse) the toggle containers on load
							$(".toggle_container").hide(); 
							//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
							$(".trigger").click(function(){
								$(this).toggleClass("active").next().slideToggle("slow");
									return false; //Prevent the browser jump to the link anchor
							});
							
							$( "#dialog" ).dialog({
								autoOpen: false,
								width: 400,
								buttons: [
									{
										text: "Ok",
										click: function() {
											$( this ).dialog( "close" );
										}
									},
									{
										text: "Cancel",
										click: function() {
											$( this ).dialog( "close" );
										}
									}
								]
							});
							
							$("#pop_window").click(function(event){
								$( "#dialog" ).dialog( "open" );
								event.preventDefault();
							});
							
							$( "#pop_window" ).hover(
								function() {
									$( this ).addClass( "ui-state-hover" );
								},
								function() {
									$( this ).removeClass( "ui-state-hover" );
								}
							);
						});
					</script>
			<!---//End-click-drop-down-menu----->
			<div class="clearfix"> </div>
		</div>
		<div class="banner-info">
			<div class="banner-left">
				<img src="images/1.png" alt=""/>
			</div>
			<div class="banner-right">
				<h1 id="user_name">I’M </h1>
				<div class="border"></div>
				<h2>UX - UI DESIGNER</h2>
				<a href="#" id="pop_window">Open Dialog</a>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$.notifySetup({sound: 'audio/notify.wav'});
	$(document).ready(function(){
		$("#search_submit").click(function(){
			var sUsername = $("#search_username").val();
			var sEmail = $("#search_email").val();
			var sPhone = $("#search_phone").val();
			if($("#search_email").val()==""&&$("#search_username").val()==""&&$("#search_phone").val()=="")
			{
				$('<p>Notify:search filter is empty!</p>').notify();
			}
			else
			{
				$.post("/server/search",
				{
				  username:sUsername,
				  email:sEmail,
				  phone:sPhone
				},
				function(data,status){
					if(null == data)
					{
						alert("return null");
						return;
					}
					
					if("0" == data.code)
					{
						$.each(data.msg, function(i, item) { 
							$("<p> username:" + item.title + " email: " + item.email + " phone: " + item.phone + "</p>").notify();
						});
					}
					else
					{
						$("<p>" + data.msg + "</p>").notify();
					}
				});
			}
		});
		
		$("#search_submit_random").click(function(){
			var sUsername = $("#search_username").val();
			var sEmail = $("#search_email").val();
			var sPhone = $("#search_phone").val();
			if($("#search_email").val()==""&&$("#search_username").val()==""&&$("#search_phone").val()=="")
			{
				$('<p>Notify:search filter is empty!</p>').notify();
			}
			else
			{
				$.post("/server/searchrandom",
				{
				  username:sUsername,
				  email:sEmail,
				  phone:sPhone
				},
				function(data,status){
					if(null == data)
					{
						alert("return null");
						return;
					}
					
					if("0" == data.code)
					{
						var str = "<p>";
						$.each(data.msg,function(key,value){
							str = str + key+":"+value+" ";
						});
						$(str + "</p>").notify();
					}
					else
					{
						$("<p>" + data.msg + "</p>").notify();
					}
				});
			}
		});
	});
</script>

<div id="dialog" title="Dialog Title">
	<div class="signup_forms">
		<div id="signup_forms_container" class="signup_forms_container">
			<form class="signup_form_form" id="sign_form">
				<div class="signup_account" id="signup_account">
					<div class="form_user">
						<input type="text" name="email" placeholder="Email" id="search_email">
					</div>
					<div class="form_user">
						<input type="text" name="username" placeholder="Username" id="search_username">
					</div>
					<div class="form_user">
						<input type="text" name="phone" placeholder="PhoneNumber" id="search_phone">
					</div>
				</div>
			</form>
		</div>
		<button type="button" id="search_submit"><span><strong>Search</strong></span></button>
		<button type="button" id="search_submit_random"><span><strong>Search_random</strong></span></button>
	</div>
</div>

<!--footer-->
<div class="footer">
	<div class="container">
		<p>Copyright &copy; 2015 Kong. Template by <a href="http://w3layouts.com/"> W3layouts</a></p>
	</div>
</div>
<!--//footer-->
<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
<!-- //here ends scrolling icon -->
<div class="notify-container notify-position-middle-center"></div>
</body>
</html>